<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
    <script src="./data.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id='app'>

        <button @click="allChoose('10010')">全选</button>
        <button @click="allChoose('10086')">反选</button>
        <h1> 总价： ￥ {{totalPrice}} </h1>
        <cell v-for="(item,index) in goods" ref="cell" @calc="calc" :key="index" :item="item"></cell>

    </div>
</body>



<template id="box">
    <div class="box">

        <img :src="choose" @click="swi = !swi" class="cho" alt="">
        <img :src="item.img" class="logo" alt="">
        <h3> {{ item.title }} </h3>
        <h5> 价格：￥{{ item.price }} </h5>
        <section>
            <button @click="item.number <= 1 ? item.number = 1 : item.number--"> - </button>
            <input type="text" v-model.number="item.number">
            <button @click="item.number++"> + </button>
        </section>

        <h1> 组件总价：{{ total }} </h1>
    </div>
</template>



<script>
    const app = Vue.createApp({
        data () {
            return {
                goods,
                totalPrice: 0
            }
        },
        methods: {
            // 该方法是用来处理 全选 和 反选的
            // type: 10010 全选   10086 反选
            allChoose (type) {
                // console.log(this.$refs.cell);
                for (let i = 0; i < this.$refs.cell.length; i++) {
                    if (type === '10010') {
                        // 全选
                        this.$refs.cell[i].swi = true
                    } else if (type === '10086') {
                        // 反选
                        this.$refs.cell[i].swi = !this.$refs.cell[i].swi
                    }
                }
            },
            // 计算所有组件的价格
            calc () {

                // 因为计算属性一上来就会立即执行一次
                // 所以第一次执行的时候 cell 为空，下面没办法遍历
                // 这里设置一个为空时不往下执行
                if (!this.$refs.cell) {
                    return
                }

                let num = 0
                for (let i = 0; i < this.$refs.cell.length; i++) {
                    if (this.$refs.cell[i].swi) {
                        //  被选中了，需要计算价格
                        num += this.$refs.cell[i].totals
                    }

                }
                // 将总价格 num 设置在页面中
                this.totalPrice = num.toFixed(2)
            }
        }
    })


    app.component('cell', {
        template: '#box',
        props: ['item'],
        data () {
            return {
                // 标记该组件是否被选中
                swi: false,
                totals: 0
            }
        },
        computed: {
            choose () {
                this.$emit('calc')
                return this.swi ? 'choose2.png' : 'choose.png'
            },
            // 计算单个组件的总价格
            total () {

                this.totals = this.item.number * this.item.price
                this.$emit('calc')

                return '￥' + this.totals.toFixed(2) + '元'
            }
        }
    })


    app.mount('#app')
</script>

</html>